import React from "react";
import { useNavigate } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement, incrementByAmount } from "../../store/user/userSlice";
const Home = () => {
  const navigate = useNavigate();
  const value = useSelector(state => state.user.value)
  const dispatch = useDispatch()
  return (
    <div>
      <div>Home</div>

      {/* 两个按钮， 分别点击 进入 我的 和 详情页面 */}
      <button onClick={() => navigate("/my")}>我的</button>
      <button onClick={() => navigate("/detail/1")}>详情</button>


      {/* 仓库数据 */}
      <div>
        <h2>{value}</h2>
        {/* 两个按钮  分别实现 +1 -1 操作 */}
        <button onClick={() => dispatch(increment())}>+1</button>
        <button onClick={() => dispatch(decrement())}>-1</button>
        <button onClick={() => dispatch(incrementByAmount(10))}>+10</button>
        <button onClick={() => dispatch(incrementByAmount(-10))}>-10</button>
      </div>
    </div>
  );
};

export default Home;
